<template>
	<view>
		<!-- 使用自定义的搜索组件 -->
		<view class="search">
			<my-search @click="toSearch">搜索</my-search>
		</view>
		<view class="scroll-container">
			<!-- 左边一级菜单 -->
			<scroll-view class="left-scroll" :style="{height: wh + 'px'}" scroll-y>
				<view v-for="(item,index) in cateList" :key="item.cat_id" @click="changeLevel2(index)" class="scroll-item" :class="{active: index == currentIndex}">
					{{ item.cat_name }}
				</view>
			</scroll-view>
			<!-- 右边二级和三级菜单 -->
			<scroll-view v-if="cateList.length" class="right-scroll" :scroll-top="scrollTop" :style="{height: wh + 'px'}" scroll-y >
				<view class="level2" v-for="item in cateList[currentIndex].children">
					<!-- 二级标题 -->	
					<view class="title">/ {{ item.cat_name }} /</view>
					<!-- 三级菜单 -->
					<view class="level3">
						<!-- 遍历二级内的children，遍历出三级 -->
						<navigator :url="`/subpkg/goods_list/goods_list?cid=${level3.cat_id}`" class="level3-item" v-for="level3 in item.children" :key="level3.cat_id">
							<image :src="level3.cat_icon" />
							<text>{{ level3.cat_name }}</text>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import tabbarBadge from '../../mixins/tabbar-badge.js'
export default {
	name: 'cate',
	mixins: [ tabbarBadge ],
	data() {
		return {
			wh: uni.getSystemInfoSync().windowHeight,
			// 分类数据列表
			cateList: [],
			currentIndex: 0,
			scrollTop: 0
		};
	},
	onLoad() {
		this.getCateList();
	},
	methods: {
		async getCateList() {
			const { data: res } = await uni.$http.get('categories');
			if (res.meta.status !== 200) uni.$showToast();
			this.cateList = res.message;
		},
		// 左侧菜单点击事件
		changeLevel2(i) {
			this.currentIndex = i;
			this.scrollTop = this.scrollTop ? 0 : 1
		},
		// 跳转至搜索页
		toSearch() {
			uni.navigateTo({
				url: '/subpkg/search/search'
			})
		}
	}
};
</script>

<style lang="scss">
.search {
	position: sticky;
	top: 0;
	z-index: 999;
}
.scroll-container {
	display: flex;
	.left-scroll {
		width: 90px;
		.scroll-item {
			background-color: #f7f7f7;
			font-size: 12px;
			text-align: center;
			line-height: 50px;
			&.active {
				background-color: #fff;
				position: relative;
				&::before {
					content: '';
					width: 3px;
					height: 30px;
					background-color: #f00;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}
		}
	}
	.right-scroll {
		font-size: 12px;
		flex: 1;
		.title {
			text-align: center;
			line-height: 40px;
			font-weight: 700;
		}
		.level3 {
			display: flex;
			flex-wrap: wrap;
			.level3-item {
				width: 33.333%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 10rpx;
				image {
					width: 60px;
					height: 60px;
				}
			}
		}
	}
}
</style>
